<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { useTodosStore } from '../../stores/todos'
import { useFilterTodosStore } from '../../stores/filterTodos'
import { useSystemStore } from '../../stores/system'
import TopBackground from '../../components/TopBackground.vue'
import TodosFilter from '../../components/TodosFilter.vue'
import FilterPopup from '../../components/FilterPopup.vue'
import CustLabel from '../../components/CustLabel.vue'
import CustCheckbox from '../../components/CustCheckbox.vue'
import dayjs from 'dayjs'

const todosStore = useTodosStore()
const filterTodosStore = useFilterTodosStore()
const systemStore = useSystemStore()

// 获取 filterTodosStore 中的待办事项列表
const todoList = computed(() => filterTodosStore.filteredTodos)

// uni-table 组件的 ref 引用
const table = ref(null)

const selectedIds = computed(() => filterTodosStore.filteredTodos.filter(todo => todo.isSelected).map(todo => todo.id))

// 处理选择变化事件
const handleSelectionChange = (_: any, todo: Todo) => {
	filterTodosStore.toggleSelectedTodo(todo)
}

// 批量标记为已完成
const handleComplete = () => {
	if (selectedIds.value.length === 0) {
		uni.showToast({
			title: '请先选择待办事项',
			icon: 'none'
		})
		return
	}
	
	// 批量更新状态为已完成
	todosStore.completeTodos(selectedIds.value)
	
	// 清空选择
	filterTodosStore.selectAllTodos(true)
	
	uni.showToast({
		title: '操作成功',
		icon: 'success'
	})
}

// 批量删除待办事项
const handleDelete = () => {
	if (selectedIds.value.length === 0) {
		uni.showToast({
			title: '请先选择待办事项',
			icon: 'none'
		})
		return
	}
	
	// 批量删除
	todosStore.deleteTodos(selectedIds.value)
	
	// 清空选择
	filterTodosStore.selectAllTodos(true)
	
	uni.showToast({
		title: '删除成功',
		icon: 'success'
	})
}

// 跳转到编辑页面
const navToEditTodo = (todo: Todo) => {
	uni.navigateTo({
		url: '/pages/editTodo/editTodo?todo=' + JSON.stringify(todo)
	})
}

// 是否显示筛选按钮
const showFilterBtn = ref(true)

// FilterPopup组件引用
const filterPopup = ref<any>(null)

// 打开筛选弹窗
const openFilterPopup = () => {
	filterPopup.value?.openPopup()

	setTimeout(() => { showFilterBtn.value = false }, 50)
}

// 关闭筛选弹窗
const closeFilterPopup = () => {
	setTimeout(() => { showFilterBtn.value = true }, 200)
}
</script>

<template>
	<view class="batch-view" :style="systemStore.warrperStyle">
		<top-background />

		<uni-table
			ref="table"
			stripe
			emptyText="请添加Todo"
			class="table-container"
		>
			<uni-tr class="button-row" v-if="todoList.length > 0">
				<uni-td class="button-cell">
					<view style="padding-left: 20rpx;">
						<CustCheckbox :checked="filterTodosStore.isSelectedAll" @change="filterTodosStore.selectAllTodos" />
					</view>
				</uni-td>
				<uni-td class="button-cell">
					<view v-if="selectedIds.length > 0" style="height: 50rpx; display: flex; align-items: left;">
						<!-- <view
							style="margin-right: 15rpx; display: inline-block;"
						>
							批量操作
						</view> -->
						<view
							style="padding: 10rpx 12rpx; border-radius: 20rpx; font-size: 28rpx; width: 80rpx;
								margin: 0; background-color: #339ca8; color: #fff; display: flex; align-items: center; justify-content: center;" @click="handleComplete"
						>
							完成
						</view>
						<view
							style="padding: 10rpx 12rpx; border-radius: 20rpx; font-size: 28rpx; width: 80rpx;
								margin-left: 15rpx ; background-color: #ff6b6b; color: #fff; display: flex; align-items: center; justify-content: center;" @click="handleDelete"
						>
							删除
						</view>
					</view>
					<view v-else>
						<view style="height: 50rpx; width: 1rpx;" />
					</view>
				</uni-td>
				<uni-td></uni-td>
				<uni-td></uni-td>
			</uni-tr>
			<uni-tr v-for="item in todoList" :key="item.id + todoList.length" style="cursor: pointer;">
				<uni-td class="button-cell">
					<view style="padding-left: 20rpx;">
						<CustCheckbox :checked="item.isSelected" @change="handleSelectionChange($event, item)" />
					</view>
				</uni-td>
				<uni-td class="table-cell" @tap="navToEditTodo(item)">{{ item.title }}</uni-td>
				<uni-td class="table-cell" @tap="navToEditTodo(item)">
					<!-- 标签显示区域 -->
					<view class="labels-container" v-if="item.labels.length">
						<CustLabel v-for="label in item.labels" :key="label.name" :label="label" type="primary" />
					</view>
				</uni-td>
				<uni-td class="table-cell" @tap="navToEditTodo(item)">
					{{ item.time ? dayjs(item.time).format('YYYY-MM-DD HH:mm') : '' }}
				</uni-td>
			</uni-tr>
		</uni-table>

		<!-- 筛选组件 -->
		<template v-if="showFilterBtn">
			<todos-filter :position="{ left: '50rpx', bottom: '50rpx' }" @open-filter-popup="openFilterPopup" />
		</template>
		
		<!-- 筛选弹窗组件 -->
		<filter-popup ref="filterPopup" @close-popup="closeFilterPopup" />
	</view>
</template>

<style scoped lang="scss">
// 确保FilterPopup显示在最上层
:deep(.filter-popup-container) {
	z-index: 9999 !important;
}
.batch-view {
	width: 100%;
	background-color: $uni-background;
	padding-bottom: 250rpx;

	.table-container {
		.uni-table-tr {
			display: flex;
			width: 100%;

			.uni-table-td {
				flex: 1;
				word-break: break-word;
			}
		}
	}
}
</style>
